import React, { Component } from 'react'
import { observable, autorun } from 'mobx'
import store from './mobx结合的stroe/store'
//对于普通类型的监听  类似vuex的状态管理库 数据会跟着变动劫持
var obserNumber = observable.box(10)
//对于复杂类型的监听 
var obserObj = observable.map({
    name: 'xiaoming',
    age: 16
})

var clearAutorun = autorun(() => {
    console.log('numebr改变了', obserNumber.get())
})
// clearAutorun() 取消订阅
autorun(() => {
    console.log('Obj改变了', obserObj.get('name'))
})

setTimeout(() => {
    //设置值
    obserNumber.set(20)
    obserObj.set('age', 20)
})
export default class App extends Component {

    componentDidMount() {
        autorun(() => {
            //获取name  name变化才会进入autorun里面
            console.log(store.name)
        })
    }
    render() {
        return (
            <div onClick={() => {
                store.name = 'xiaoxiao '
            }}>App</div>
        )
    }
}
